<script setup lang="ts">
  import AsideMenu from '@/components/dataShow/AsideMenu.vue';
  import MobileAsideMenu from '@/components/dataShow/MobileAsideMenu.vue';
  import MultipleTabs from '@/components/common/multiple/MultipleTabs.vue';
  import { computed, ref } from 'vue';
  import AppIcon from '@/components/common/app/AppIcon.vue';
  import MultipleTabsTool from '@/components/common/multiple/MultipleTabsTool.vue';
  import { useAppSettingStore } from '@/store/module/useAppSettingStore';
  const appSettingStore = useAppSettingStore();
  const collapseIcon = ref<HTMLSpanElement>(null!);
  const changeCollapse = () => {
    appSettingStore.toggleCollapse();
    collapseIcon.value.children[0].classList.toggle('rotate-180');
  };
</script>

<template>
  <div class="flex flex-col lg:flex-row">
    <div
      class="relative hidden lg:flex flex-col overflow-y-auto asideMenu border-r border-border-b dark:border-border-b-dark bg-header-bg dark:bg-header-bg-dark"
      style="height: calc(100vh - 60px)"
    >
      <AsideMenu class="hidden lg:block" :collapse="appSettingStore.getCollapse" />
      <div
        ref="collapseIcon"
        @click="changeCollapse"
        class="absolute cursor-pointer text-[0px] left-0 right-0 bottom-0 h-16 bg-collapse-bg dark:bg-collapse-bg-dark hidden lg:flex justify-center items-center"
      >
        <AppIcon class="text-3xl duration-500" icon="akar-icons:chevron-left" />
      </div>
    </div>

    <div class="dataShowPane flex-1">
      <div class="flex py-1 items-center border-b border-border-b dark:border-border-b-dark">
        <MobileAsideMenu class="block lg:hidden" />
        <MultipleTabs />
        <MultipleTabsTool />
      </div>
      <div class="">
        <RouterView v-slot="{ Component }">
          <KeepAlive>
            <Transition name="slider" mode="out-in" appear>
              <Component :is="Component" />
            </Transition>
          </KeepAlive>
        </RouterView>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  @import 'src/design/mixin';
  .slider-enter-active,
  .slider-leave-active {
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
  }
  .slider-enter-from,
  .slider-leave-to {
    opacity: 0;
  }
  .slider-enter-from {
    transform: translateX(-15px);
  }
  .slider-leave-to {
    transform: translateX(15px);
  }

  .asideMenu {
    @include scroll();
  }

  .dataShowPane {
    min-height: calc(100vh - 60px);
  }
  .dataShowPaneItem {
    @apply overflow-y-auto bg-sky-50 dark:bg-[#050713];
    @include scroll();
    height: calc(100vh - 110px);
    @media (max-width: 1024px) {
      height: calc(100vh - 100px);
    }
  }
</style>
